<template>
	<view class="scroll-v">
		<!-- 搜索 -->
		<view class="search-box">
			<view class="dialog-modal">
				<view class="dialog-wrapper" v-show="isShowSearchModal" @click="onClose"></view>
				<transition name="drop">
					<view class="dialog-container" v-show="isShowSearchModal">
						<slot>
							<view class="content-bigbox">
								<view class="cu-form-group">
									<view class="title">岗位名称</view>
									<input placeholder="请输入" name="input" v-model="postName" class="text-r"></input>
								</view>
								<view class="form-item cu-form-group">
									<view class="title">招聘状态</view>
									<picker @change="statusChange" :value="index" :range="status" range-key="name">
										<view class="picker">
											{{index>-1?status[index].name:'请选择'}}
										</view>
									</picker>
								</view>
								<view class="form-item cu-form-group" v-if="page_flag != Constants.MY_COMPANY">
									<view class="title">企业选择</view>
									<picker @change="companyChange" :value="index1" :range="company" range-key="name">
										<view class="picker">
											{{index1>-1?company[index1].name:'请选择'}}
										</view>
									</picker>
								</view>
								<view class="btm-btn" @click="onClose">确定</view>
							</view>
						</slot>
					</view>
				</transition>
			</view>
		</view>
		<!-- 搜索 -->

		<view class="btn-edit" style="background: #F08519; position: fixed; top: 60px; right: 20px; z-index: 99; color: #FFFFFF; padding: 2px 10px;"
		 @tap="onNavigate" v-show="DEV">添加任务</view>

		<view class="company-info-view" v-show="showCompanyInfo">
			<view class="company-title">
				<text class="title-lable">驻厂企业：</text>
				<text class="title-value">{{companyInfo.company_name || '公司名称（默认）'}}</text>
			</view>
			<view class="company-talent-count">
				<view class="wrap-title-view flex rcc">
					<view class="line-style horizontal-line" />
					<text class="wrap-title">企业人才库</text>
					<view class="line-style horizontal-line" />
				</view>
				<view class="wrap-con-view flex rcb">
					<view class="count-item-view flex ccc flex-1">
						<view class="count-item-num">{{companyInfo.total_num || 0}}</view>
						<view class="count-item-title">招聘总数</view>
					</view>
					<view class="count-item-view flex ccc flex-1">
						<view class="count-item-num">{{companyInfo.work_num || 0}}</view>
						<view class="count-item-title">在职总数</view>
					</view>
					<view class="count-item-view flex ccc flex-1">
						<view class="count-item-num">{{companyInfo.leave_num || 0}}</view>
						<view class="count-item-title">未入职总数</view>
					</view>
				</view>
			</view>
		</view>

		<view class="list" v-if="taskList.length > 0">
			<block v-for="(items,index) in taskList" :key="index">
				<PositionTaskItem :item="items" :index="index" :onRefresh="_onRefresh" />
			</block>
			<view class="loadStatus">{{loadStatus}}</view>
		</view>
		<loading v-else-if="firstload"></loading>
		<!-- 无内容默认 -->
		<no-thing v-else></no-thing>

	</view>
</template>

<script>
	import loading from "../../components/common/loading.vue";
	import noThing from "../../components/common/no-thing.vue";
	import PositionTaskItem from "../../components/item/position-task-item.vue"
	export default {
		components: {
			loading,
			noThing,
			PositionTaskItem
		},
		data() {
			return {
				DEV: this.__DEV__,
				Constants: this.Constants,
				showCompanyInfo: false,
				is_personal: '',
				firstload: true,
				groupId: '',
				token: '',
				page: 1,
				postName: '', //岗位名称
				// 招聘状态
				index: -1,
				status: [],
				// 企业选择
				company: [],
				index1: -1,
				loadStatus: "",
				// 接受后台返回的列表参数
				taskList: [],
				// 请求后台需要的数据
				status_id: '', //招聘状态id
				company_id: '', //企业选择id
				companyInfo: {},
				isShowSearchModal: false,
				page_flag: '',
			}
		},
		onLoad(option) {
			console.log('option---->', option);
			if (option.groupId) {
				this.groupId = option.groupId;
			}
			if (option.page_flag) {
				this.page_flag = option.page_flag;
				let title;
				switch (option.page_flag) {
					case this.Constants.PERSONAL_TASK:
						this.is_personal = 'yes';
						title = '个人任务';
						break;
					case this.Constants.MY_COMPANY:
						title = '我的驻企';
						this.company_id = option.company_id;
						break;
					default:
						break;
				}
				if (title) {
					uni.setNavigationBarTitle({
						title
					});
				}
			}
			if (option.is_personal) {
				this.is_personal = true;
				uni.setNavigationBarTitle({
					title: '个人任务'
				});
			}
		},
		onPullDownRefresh() {
			this._onRefresh();
			// console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			// console.log('_onLoadMore---->', '_onLoadMore');
			this.loadMore();
		},
		// 监听原生标题导航按钮点击事件
		onNavigationBarButtonTap(e) {
			switch (e.index) {
				case 0:
					this.onNavigate();
					break;
				case 1:
					this.isShowSearchModal = true;
					break;
			}
		},
		methods: {
			onNavigate() {
				uni.navigateTo({
					url: '/pages/publish/addRecruitmentPosition?company_id=' + this.company_id
				})
			},
			onClose() {
				this.isShowSearchModal = false;
				this._onRefresh();
			},
			// 上拉刷新
			_onRefresh() {
				this.isShowSearchModal = false;
				this.page = 1;
				this.getList();
				// console.log('_onRefresh---->', '_onRefresh');
			},
			// 取token
			getToken() {
				try {
					const value = uni.getStorageSync('login_key');
					if (value) {
						this.token = value;
					}
				} catch (e) {
					// error
				}
			},
			// 请求列表
			async getList() {
				// 发请求
				let url = this.ServicesApi.getPositionTaskList;
				let data = {
					page: this.page,
					limit: 10,
					is_personal: this.is_personal,
					search: this.postName, //岗位名称
					team_id: this.groupId, // 招聘小组id
					company_id: this.company_id, //企业id
					status: this.status_id, //状态，不传值是查询全部，0是关闭 其他的值是开启的
				};
				let result = await this.Services.post(url, data);
				if (result.code == this.StatusCode.SUCCESS_CODE) {
					if (this.page_flag == this.Constants.MY_COMPANY) {
						this.companyInfo = result.data.company_info;
						this.showCompanyInfo = true;
					}
					this.taskList = result.data.data;
					this.firstload = false;
				} else {
					this.firstload = false;
					uni.stopPullDownRefresh();
				}
			},
			async getCompanyInfo() {
				let url = this.ServicesApi.company_recu_info;
				let data = {
					company_id: this.company_id,
				};
				let result = await this.Services.post(url, data);
				if (result.code == this.StatusCode.SUCCESS_CODE) {
					this.companyInfo = result.data;
				}
			},
			// 请求搜索条件
			async getSearchStatus() {
				// 发请求
				let url = this.ServicesApi.positionStatusList;
				let data = {};
				let result = await this.Services.post(url, data);
				if (result.code == this.StatusCode.SUCCESS_CODE) {
					this.status = result.data.status;
					this.company = result.data.company_list;
				}
			},
			// 上拉加载
			async loadMore() {
				this.loadStatus = "加载中..."
				this.page++;
				// console.log(this.page)
				this.getToken();
				// 发请求
				let url = this.ServicesApi.getPositionTaskList;
				let data = {
					page: this.page,
					limit: 10,
					is_personal: this.personal,
					search: this.postName, //岗位名称
					team_id: this.groupId, // 招聘小组id
					company_id: this.company_id, //企业id
					status: this.status_id, //状态，不传值是查询全部，0是关闭 其他的值是开启的
				};
				let result = await this.Services.post(url, data);
				if (result.code == this.StatusCode.SUCCESS_CODE) {
					let arr = result.data.data;
					this.taskList.push(...arr)
					if (arr.length < 10) {
						this.loadStatus = "没有更多数据"
					}
				} else {
					this.loadStatus = "没有更多数据"
				}

			},

			// 点击新增跳转页面
			handleClickAdd() {
				uni.navigateTo({
					url: "/pages/publish/addRecruitmentPosition"
				})
			},

			// 招聘状态
			statusChange(e) {
				uni.hideKeyboard();
				this.index = e.detail.value
				this.status_id = this.status[this.index].id
			},
			// 企业选择
			companyChange(e) {
				uni.hideKeyboard();
				this.index1 = e.detail.value
				this.company_id = this.company[this.index1].id
			},
		},
		mounted() {
			this.getList();
			this.getSearchStatus();
		},
		onShow: function(e) {
			// #ifndef H5
			let pages = getCurrentPages();
			let currPage = pages[pages.length - 1];
			if (currPage.data && currPage.data.isDoRefresh == true) {
				currPage.data.isDoRefresh = false;
				// console.log('s刷新');
				this._onRefresh();
			} else {
				//不用刷新
			}
			// #endif
			// #ifdef H5
			this._onRefresh()
			// #endif
		}
	}
</script>

<style scoped lang="stylus">
	.company-info-view {
		padding: 30rpx;
		background: #fff;

		.company-title {
			margin-bottom: 30rpx;

			.title-lable {
				color: #666666;
				font-size: 30rpx;
				margin-right: 10rpx;
			}

			.title-value {
				color: #368AED;
				font-size: 36rpx;
			}
		}

		.company-talent-count {
			padding: 30rpx;
			height: 260rpx;
			overflow: hidden;
			border-radius: 10rpx;
			background-image: url('~@/static/img/img_bg_company_info.png');
			background-repeat: no-repeat;
			background-size: 100%;

			.wrap-title-view {
				.horizontal-line {
					width: 80rpx;
					background: #fff;
				}

				.wrap-title {
					color: #fff;
					margin: 0 30rpx;
					font-size: 30rpx;
				}
			}

			.wrap-con-view {
				margin-top: 40rpx;

				.count-item-view {
					flex: 1;
					color: #fff;

					.count-item-num {
						font-size: 36rpx;
						font-weight: 700;
					}

					.count-item-title {
						font-size: 32rpx;
					}
				}
			}
		}
	}

	.loadStatus {
		color: #ccc;
		font-size: 30upx;
		margin-top: 20upx;
		text-align: center;
		margin-bottom: 20upx;
	}

	.scroll-v {
		height: 100vh;
	}

	.btm-btn-box {
		justify-content space-around;
		margin: 30upx 0;

		.btm-btn {
			height: 50upx;
			width: 100upx;
			background: #007AFF;
			color: #fff;
			text-align: center;
			line-height: 50upx;
			font-size: 20upx;
		}
	}

	.btn-add {
		height: 100upx;
		width: 300upx;
		background: #007AFF;
		color: #fff;
		text-align: center;
		line-height: 100upx;
		margin: 30upx auto;
	}

	.list-box {
		padding: 20upx;
		margin: 40upx 0;
		background: #fff;
	}

	.search-box {
		.search-inp {
			align-items: center;
			margin-bottom: 30upx;

			.inp {
				height: upx;
				width: 582upx;
				background: #F3F3F3;
			}

			.search {
				font-size: 30upx;
				color: #4A90E2;
				margin-left: 28upx;
			}
		}

		.content-bigbox {
			padding: 42upx 40upx;

			.content1 {
				justify-content space-between;
				margin-bottom: 30upx;

				.text-box {
					height: 50upx;
					width: 130upx;
					background: #F3F3F3;
					font-size: 28upx;
					font-weight: 400;
					color: rgba(153, 153, 153, 1);
					justify-content: space-between;
					// padding:0 8upx 0 18upx;
					padding-left: 18upx;
					align-content center;
					align-items: center;
				}

				.te1 {
					width: 282upx;

				}

				.te2 {
					width: 282upx;
					margin-right: 90upx;
				}

				.overflow {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					width: 310upx;
				}

				.te3 {
					width: 172upx;

				}

				.te4 {
					width: 210upx;
				}

				.te5 {
					width: 210upx;
					margin-right: 230upx;
				}
			}

			.btm-btn {
				height: 80upx;
				width: 670upx;
				margin: 50upx auto 0;
				background: linear-gradient(90deg, rgba(74, 144, 226, 1) 0%, rgba(0, 102, 220, 1) 100%);
				border-radius: 2upx;
				text-align center;
				line-height 80upx;
				font-size: 32upx;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
			}
		}

		.dialog-modal {
			position: absolute;
			z-index: 10000;
		}

		.dialog-wrapper {
			position: fixed;
			height: 100%;
			width: 100%;
			z-index: 5;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
		}

		.dialog-wrapper {
			background-color: #000;
			opacity: 0.2;
		}

		.dialog-container {
			position: fixed;
			z-index: 80;
			top: 0;
			left: 0;
			width: 100%;
			min-height: 344upx;
			background-color: #fff;

		}

		span.close-btn {
			padding: 5px 10px;
			float: right;
			cursor: pointer;
			font-size: 16px;
			font-weight: bold;
		}
	}
</style>
